<template>
	<!-- 预约 -->
	<view class="app">
		<view v-if="!!id" class="" style="margin: 6px 0;font-size:1.4em;font-weight: 700;text-align: center;">单位名称： {{username || ''}}</view>
		
		<view v-if="!id" class="" style="margin: 16px 0;font-size:1.2em;color: red;">
			尚未填写申报信息，请点击“返回”，去填写申报信息。
		</view>
		<view v-else class="" style="font-size:1.3em; text-align: center; margin-top: 40px;">
			<view class="" v-if="yuyuedate">
				您已预约 <text style="font-size:20px;font-weight:700;color:red;">{{yuyuedate}}</text> 进行现场评定
			</view>
			<view class="" style="margin-top: 18px;" v-if="status == 0">
				<u-button type="primary" size="medium" shape="square" @click="showDate = true"> {{yuyuedate ? '重新' : ''}}预约现场评定日期 </u-button>
			</view>
		</view>
		<view class="btn-bar">
			<view class="loginBtn">
				<u-button type="info" shape="square" size="medium" @click="toPage('./intro')">返回</u-button>
				<u-button v-if="!id" type="primary" shape="square" size="medium" @click="showLoginForm = true">去登录</u-button>
				<u-button v-if="id && status == 0" type="primary" shape="square" :loading="loading" :disabled="disabled" @click="submit">提交预约</u-button>
			</view>
		</view>
		
		<u-calendar v-model="showDate" mode="date" :min-date="minDate" :max-date="maxDate"  @change="changeDate"></u-calendar>
		
		<u-mask :duration="10":show="showLoginForm" z-index="1000" @click="showLoginForm=false"></u-mask>
		<view class="loginDialog" v-show="showLoginForm">
			<view class="loginTitle">登录已申报的企业</view>
			<view class="loginForm">
				<u-field style="width: 100%;"
					v-model="xkz"
					label="许可证号"
					placeholder="请填写许可证号"
					trim
					:field-style="fieldStyle"
					:error-message="errorMessage1"
				/>
				<u-field style="width: 100%;"
					v-model="pwd"
					label="密码"
					placeholder="请填写密码"
					trim
					:field-style="fieldStyle"
					:error-message="errorMessage2"
				/>
			</view>
			<view class="loginBtn">
				<u-button type="info" shape="square" size="medium" @click="toPage('./intro')">返回</u-button>
				<u-button type="primary" shape="square" size="medium" :loading="loading" :disabled="disabled" @click="login">登录</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/app.config.js'
	
	export default {
		data() {
			return {
				disabled: false, // 提交中
				loading: false, // 提交中
				
				id: null,
				status: null,
				yuyuedate: null,
				username: '',
				
				showLoginForm: false,
				xkz: '',
				pwd: '',
				errorMessage1: '',
				errorMessage2: '',
				fieldStyle: {
					color: '#30616C',
					letterSpacing: '1rpx'
				},
				
				showDate: false,
				minDate: vk.pubfn.timeFormat(new Date(), "yyyy-MM-dd"),
				maxDate: '2050-12-31', // 日历的最大可选日期
			}
		},
		onLoad(options) {
			this.initPage(options);
		},
		methods: {
			initPage(options = {}){
				this.id = options.id
				this.getInfo(); // 在方法里判断id走不同分支
			},
			toPage(url) {
				vk.navigateTo(url)
			},
			// 获取详情
			getInfo(){
				this.showLoginForm = true;
			},
			// 登录。仅为了获取申报信息，不保留登录状态
			login(){
				this.errorMessage1 = this.xkz ? '' : '请输入许可证号';
				this.errorMessage2 = this.pwd ? '' : '请输入密码'
				
				if(this.errorMessage1 || this.errorMessage2){
					return
				}
				
				let url, data;
				url = 'client/sakj/pub.lhfj.getApplyInfoByXkzAndPwd';
				data = { xkz: this.xkz, pwd: this.pwd }
				
				vk.callFunction({
					url,
					data
				})
				.then(res => {
					// console.log('login res', res)
					if(res.code === 0 && res.data){
						this.id = res.data.id;
						this.yuyuedate = res.data.yuyuedate
						this.status = res.data.status
						this.username = res.data.username
						
						this.showLoginForm = false;
						this.errorMessage1 = '';
						this.errorMessage2 = '';
					}else{
						this.errorMessage1 = '未查询到该企业本年度的申报信息'
					}
				})
				.catch(err => {console.log('login err', err)})
			},
			/**
			 * 验证表单并提交
			 */
			submit(e) {
				if (config.debug) console.log('验证表单', this.formData)
				
				this.disabled = true;
				this.loading = true;
				
				let that = this
				
				setTimeout(function(){
					that.formValid()
				}, 100)
			},
			formValid(){
				if(this.status == 0 && this.yuyuedate){
					this.submitDate()
				}else{
					vk.toast('请选择预约日期');
				}
			},
			// 更换日历
			changeDate(e) {
				this.yuyuedate = e.result
			},
			submitDate() {
				let data = {
					id: this.id,
					yuyuedate: this.yuyuedate
				}
				// console.log('提交data', data);
				vk.callFunction({
					url: 'client/sakj/pub.lhfj.apply3',
					data
				})
				.then(res => {
					// console.log('预约res', res);
					vk.toast("预约成功，请等待工作人员受理", "none", () => {
						this.disabled = false;
						this.loading = false;
					}); 
				})
				.catch(err => {
					console.log('提交err', err);
					this.disabled = false;
					this.loading = false;
				})
			},
		}
	}
</script>

<style>
.photo-bg {
	position: relative;
    width: 80px;
    height: 80px;
    border: 1px solid RGB(204, 204, 204);
}
.photo-plus{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	content: '+';
	width: 80px;
	height: 80px;
	font-size: 64px;
	line-height: 60px;
	text-align: center;
	color: #e1e1e1;
}
/* .photo-bg::before{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	content: '+';
	width: 80px;
	height: 80px;
	font-size: 100px;
	line-height: 60px;
	text-align: center;
	color: RGB(204, 204, 204);
} */
.photo-img{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 101;
	width: 80px;
	height: 80px;
}

.loginDialog{
	position: fixed;
	top: 300rpx;
	left: 0;
	right: 0;
	margin: auto;
	width: 600rpx;
	height: 500rpx;
	background-color: #fff;
	border-radius: 18px;
	box-shadow: 1px 1px 2px 2px #000;
	transition: all 0.25s linear;
	z-index: 1001;
}
.loginTitle{
	padding-top: 60rpx;
	font-size: 16px;
	text-align: center;
}
.loginForm{
	padding: 20rpx 30rpx 50rpx;
	display: flex;
	flex-direction: column;
	width: 100%;
}
.loginBtn{
	display: flex;
	justify-content: space-around;
}

.btn-bar{
	position: fixed;
	width: 90%;
	bottom: 10px;
}
</style>
